<template>
    <div :style="{ padding: '24px', background: '#fff' }">
        <div @click="clickHandle">{{ name }}</div>
        <div @click="clickHandle">{{ getName }}</div>
        <div @click="clickHandle">{{ store.name }}</div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { storeToRefs } from 'pinia'
import { mainStore } from '@pinia/main'
export default defineComponent({
    setup() {
        let store = mainStore();
        const clickHandle = () => {
            store.updateName("100")
        }
        return {
            // 整个状态
            store,
            //特定的状态
            name: computed(() => store.name),
            // 访问getter
            getName: computed(() => store.getName),
            clickHandle
        }
    }
})
</script>
<style lang="less" scoped>
</style>